<template>
    <div style="width:100%;height: 100%;overflow: scroll" >

      <div style="background-color:#fff;padding:10px 20px; ">
        <span style="line-height:60px;font-size:26px; font-weight: bold">我的评价页面</span>
      </div>
      <el-card style="margin: 20px;">
        <el-table :data="myComment" style="width: 100%">
          <el-table-column type="index" width="80" align="center" prop="id" label="评价编号"></el-table-column>
          <el-table-column align="center" prop="content" label="评价内容"></el-table-column>
          <el-table-column align="center" prop="branchId" label="餐厅名称" :formatter="formatRoleTable"></el-table-column>
          <el-table-column align="center" prop="createTime" label="评论时间"></el-table-column>
          <el-table-column prop="dineTime" label="用餐时间" align="center"></el-table-column>
          <el-table-column prop="score" label="评分" align="center">
            <template #default="scope">
              <el-rate v-model="scope.row.score" disabled></el-rate>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button type="danger" size="small" @click="deleteComment(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
// 获取我的个人评价
const myComment = ref([]);
// 获取当前登录用户的个人信息
const user= ref(getUser());
const getMyComment = () => {
  axios.get(BASE_URL+'/v1/comment/myComment?userId='+user.value.id).then((response)=>{
    if(response.data.code===2000){
      myComment.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
// 加载数据
onMounted(
    ()=>{
      getMyComment();
      getBranchs(branchOptions);
    }
)
// 定义保存餐厅数据的数组
const branchOptions = ref([]);
// 通过id显示餐厅的对应显示名称
const formatRoleTable = (row,column,cellValue,index)=>{
  if(!branchOptions.value){
    return cellValue;
  }
  for(let item of branchOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
};
// 删除评论
const deleteComment = (id)=>{
  if(confirm('您确认要删除该评论吗?')){
    axios.post(BASE_URL+'/v1/comment/deleteById/'+id)
        .then((response)=>{
          if(response.data.code===2000){
            ElMessage.success("删除成功");
            getMyComment();
          }else{
            ElMessage.error(response.data.msg);
          }
        })
  }

}

</script>

<style scoped>

</style>